<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的生命周期</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app" ref="app">
    <div>
        <a :href="'http://www.'+url+'.com'">{{num + 1 }}</a><br>
        <a :href="url">{{flag?'真的':'假的' }}</a>
    </div>
</div>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'<a style="color: red;">欢迎来到dap高级研发群</a>',
            num:1,
            flag:true,
            url:'baidu'
        },
        beforeCreate(){
            console.log('即将创建')
            console.log(this.$data)
            console.log(this.$el)
        },
        created(){
            console.log('已经创建')
            console.log(this.$data)
            console.log(this.$el)
        },
        beforeMount(){
            console.log('渲染之前')
            console.log(this.$data)
            console.log(this.$el)
        },
        mounted(){
            console.log('挂载完成')
            console.log(this.$el)
        },
        beforeUpdate(){
            console.log('更新渲染之前')
            console.log(this.$refs.app.innerHTML)
        },
        updated(){
            console.log('更新渲染之后')
            console.log(this.$refs.app.innerHTML)
        },
        beforeDestroy(){
            console.log('销毁之前')
        },
        destroyed(){
            console.log('销毁之后')
        }
    })
</script>

</body>
</html>